<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>文章列表</title>
  <link rel="stylesheet" href="./libs/bootstrap/css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/iconfont.css">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./libs/layui/css/layui.css">
  <script src="./libs/jquery/jquery.min.js"></script>

</head>

<body>
  <div class="container-fluid">
    <div class="common_title">
      用户信息修改
    </div>
    <div class="container-fluid common_con">
      <form class="form-horizontal article_form" id="form">
        <div class="form-group">
          <label for="inputEmail1" class="col-sm-2 control-label">用户名称：</label>
          <div class="col-sm-4">
            <input type="text" name="username" class="form-control username" id="username" value="李思思">
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail2" class="col-sm-2 control-label">昵称：</label>
          <div class="col-sm-4">
            <input type="text" name="nickname" class="form-control nickname" id="nickname" value="哈哈思">
          </div>
        </div>
        <div class="form-group">
          <label for="inputEmail3" class="col-sm-2 control-label">邮箱：</label>
          <div class="col-sm-4">
            <input type="email" name="email" class="form-control email" id="email" value="520@163.com">
          </div>
        </div>

        <div class="form-group">
          <label for="inputPassword3" class="col-sm-2 control-label">用户图标：</label>
          <div class="col-sm-10">
            <img src="images/2.jpg" alt="" class="user_pic">
            <input style="display: block" name="userPic" type="file" id="exampleInputFile">
          </div>
        </div>

        <div class="form-group">
          <label for="inputEmail4" class="col-sm-2 control-label">密码：</label>
          <div class="col-sm-4">
            <input type="password" name="password" class="form-control password" id="password" value="12345678">
          </div>
        </div>
        <div class="form-group">
          <div class="col-sm-offset-2 col-sm-10">
            <button type="submit" class="btn btn-success btn-edit">修改</button>
          </div>
        </div>
      </form>
    </div>
  </div>
  <script src="./libs/jquery/jquery.min.js"></script>
  <script src="./libs/layui/layui.all.js"></script>
  <script src="./js/http.js"></script>
  <script>
    $(function () {
      getUser()
    })
    //获取旧数据放上去
    function getUser() {
      myHeader('/admin/user/detail', 'get', null, function (resData) {
        let data = resData.data;
        $('#username').val(data.username);
        $('#nickname').val(data.nickname);
        $('#email').val(data.email);
        $('.user_pic').prop('src', data.userPic);
        $('#password').val(data.password);
      })

      //进行修改提交新数据
      $('.btn-edit').click(function (e) {
        e.preventDefault()
        let file = document.querySelector('#exampleInputFile').files[0];
        let formData = new FormData();
        formData.append('username', $('#username').val())
        formData.append('nickname', $('#nickname').val())
        formData.append('email', $('#email').val())
        formData.append('userPic', file)
        formData.append('password', $('#password').val())
        myHeader('/admin/user/edit', 'post', formData, function (resData) {
          if (resData.code !== 200) {
            layer.msg(resData.msg)
            return false;
          }
          layer.msg(resData.msg)
          window.parent.alter();
        })
      })
    }
    //图片预览
    $('#exampleInputFile').change(function () {
      let file = document.querySelector('#exampleInputFile').files[0];
      let fileUrl = URL.createObjectURL(file);
      $('.user_pic').prop('src', fileUrl)
    })

    myJsGet('/admin/category/list', null, function (resData) {
      console.log(resData);
    })
  </script>
</body>

</html>